<template>
    <TopBar></TopBar>
    <div class="menu-demo">
    <a-menu
      :style="{ width: '200px', height: '100%' }"
      :default-open-keys="['0']"
      :default-selected-keys="['BackendBlogs']"
      show-collapse-button
      breakpoint="xl"
      @menu-item-click="onMenuItemClick"
    >
      <a-sub-menu key="0">
        <template #icon><icon-apps></icon-apps></template>
        <template #title>博客管理</template>
        <a-menu-item key="BackendBlogs">博客列表</a-menu-item>
        <a-menu-item key="EditBlogs">博客编辑</a-menu-item>
      </a-sub-menu>
    </a-menu>
    <div class="page">
        <router-view></router-view>
    </div>
  </div>

  

</template>

<script setup>
import TopBar from '@/components/TopBar.vue';
import { useRouter } from 'vue-router';

const router = useRouter()

// const onSubMenuClick = (data) =>{
//     // console.log(data)
// }
const onMenuItemClick = (key) =>{
    router.push({ name: key })
} 

</script>

<style lang="css" scoped>
.menu-demo {
  /* box-sizing: border-box;
  width: 100%;
  height: 600px;
  padding: 40px;
  background-color: var(--color-neutral-2); */
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}


</style>